<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript" src="/core/file.js"></script>
    <link rel="stylesheet" href="/css/login.css">
</head>
<body>
<div id="app" >
    <el-card class="box-card" style="width: 500px;padding:20px;margin: 0 auto;margin-top: 50px">
        <div class="box_top">
            <h1>良井后台管理系统</h1>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="帐号：" prop="username">
                <el-input onkeydown="if(event.keyCode==13) {$('#loginBtn').click();return false;}" v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input type="password" onkeydown="if(event.keyCode==13) {$('#loginBtn').click();return false;}" v-model="ruleForm.password"></el-input>
            </el-form-item>
<!--            <el-form-item label="验证码：" prop="code">-->
<!--               <div style="display: flex">-->
<!--                   <el-input type="text" onkeydown="if(event.keyCode==13) {$('#loginBtn').click();return false;}" v-model="ruleForm.code"></el-input>-->
<!--                   <div class="login-code">-->
<!--                       <img :src="codeUrl"-->
<!--                            @click="getCode">-->
<!--                   </div>-->
<!--               </div>-->
<!--            </el-form-item>-->
            <el-form-item label="记住我：" >
                <el-checkbox v-model="ruleForm.rememberMe"></el-checkbox>
            </el-form-item>
        </el-form>
        <div style="width: 100%;text-align: center"><el-button type="primary" id="loginBtn" @click="login()">登录</el-button></div>
    </el-card>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ruleForm: {
                username: 'admin',
                password: '123456',
                code: '',
                rememberMe: true,
            },
            rules: {
                username: [
                    {required: true, message: '请输入帐号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ],
                // code: [
                //     {required: true, message: '请输入验证码', trigger: 'blur'},
                // ],
            },
            //验证码图片url
            codeUrl:"",

        },
        created: function () {
            this.getCode();
        },
        methods: {
            //获取验证码
            getCode(){
                get("/sys-login/getCode",res=>{
                    this.codeUrl=res;
                })
            },
            //登录
            login() {
                this.ruleForm.code = "0";
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/login",
                            type: "post",
                            data: this.ruleForm,
                            success: function (res) {
                                if(res.code!=1){
                                    vm.$message.error(res.msg);
                                    vm.getCode()
                                }else{
                                    //设置用户信息缓存
                                    setSession("userInfo",res.data);
                                    window.location.href = "admin.html";
                                }

                            }
                        })

                    }
                });

            }
        }
    })

    window.vue = vm;
</script>

</html>